<script setup lang="ts">
import { nextTick, unref, ref, provide } from 'vue'
import { useMessage } from '@/hooks/web/useMessage'
import { useDriver } from '@/hooks/web/useDriver'
import testDialog from './testDialog.vue'
import TmeUpload from '@/components/Upload/index.vue'
import { addScoringTemplateApi } from '@/api/mock'

provide('uploadApi', addScoringTemplateApi)

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const debounceClick = () => {
  console.log('点击了防抖按钮')
  useMessage().success({ message: '这是一个防抖按钮🍧' })
}

const throttleClick = () => {
  useMessage().success({ message: '这是一个节流按钮🍧' })
}
/**
 * 开启引导
 */
const handleTour = () => {
  useDriver('default')
}

const dialogRef = ref<ComponentRef<typeof testDialog>>()
/**
 * 显示弹窗
 * @param type
 * @param row
 */
const showDialog = (type: 'add' | 'edit', row = null) => {
  nextTick(() => {
    unref(dialogRef)?.handleShow(type, row)
  })
}

const uploadRef = ref<ComponentRef<typeof TmeUpload>>()
const fileParams = ref({
  id: 123
})
const showUpload = () => {
  unref(uploadRef)?.dialogShow()
}
const updateList = () => {
  console.log('更新')
}
</script>
<template>
  <div class="page-container">
    <el-button v-debounce="debounceClick">防抖按钮(0.5秒后执行)</el-button>
    <el-button v-throttle="throttleClick">节流按钮</el-button>
    <el-button @click="handleTour">开始引导</el-button>
    <el-button @click="showUpload">上传</el-button>
    <div>
      <el-button type="primary" @click="showDialog('add')">新增</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" align="center" width="180" />
      <el-table-column prop="name" label="Name" align="center" width="180" />
      <el-table-column prop="address" align="center" label="Address" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="showDialog('edit', row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <test-dialog ref="dialogRef" @updateList="updateList" />
    <tme-upload ref="uploadRef" :fileParams="fileParams" />
  </div>
</template>

<style lang="scss" scoped></style>
